<template>
  <div class="details_container">

    <div class="details_wrapper">
        <div class="list_item_container" 
        v-for="(item,index) in list" :key="index">
            <div class="list_item_img">
                <img :src="item.mainPic" alt="">
            </div>
            <div class="list_item_title">{{item.title}}</div>
            <div class="list_item_price">
                ￥{{item.actualPrice}}
                <div class="add_details" @click="addDetails(item)">
                    +
                </div>
            </div>
        </div>
    </div>
    <!-- 弹出框 -->
    <van-action-sheet v-model="show">
        <div class="content">
            <div class="content_header">
                <div class="content_header_img">
                    <img :src="details.mainPic" alt="">
                </div>
                <!-- <div class="content_header_message">
                    <div></div>
                    <div></div>
                    
                </div> -->
            </div>
            <div>
                <div class="header_messa_title">{{details.title}}</div>
            </div>
            <div class="header_messa_price">
                        ￥{{details.actualPrice}}
                    </div>
            <div class="details_bottom" @click="addCart()">
                加入购物车
            </div>
        </div>
    </van-action-sheet>

  </div>
</template>

<script>
import axios from 'axios'

export default {
  data(){
      return {
          list:[],
          show: false,
          details:{},
          cartItem:[]
      }
  },
  computed:{

  },
  methods:{
      addDetails(item){
          this.show = true
          axios.get(`http://api.kudesoft.cn/tdk/details?id=${item.id}`).then((res)=>{
              console.log(res.data.data.data)
              res.data.data.data.checked = false
              this.details = res.data.data.data
          }).catch((error)=>{
              console.log(error)
          })
      },
      addCart(){
        var index = this.cartItem.findIndex((ele)=>{
            return ele.id === this.details.id
        })
        if(index != -1){
            this.cartItem[index].brand ++
        }else{
            this.cartItem.push(this.details)
        }
        this.$store.dispatch('addCart')
        localStorage.setItem('carts',JSON.stringify(this.cartItem))
      }

  },
  mounted(){
    axios.get('http://api.kudesoft.cn/tdk/goods').then((res)=>{
        // console.log(res.data.data.data.list)
        this.list = res.data.data.data.list
        // console.log("list",this.list)

    }).catch((error)=>{
        console.log(error)
    })
  }
}
</script>

<style scoped>
    .details_container {
        width: 100%;
        background-color: #f5f5f5;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    .details_wrapper {
        width: 94%;
        display: inline-flex;
        justify-content: space-between;
        align-content: center;
        flex-wrap: wrap;
    }
    .list_item_container {
        width: 48%;
        height: 240px;
        background-color: orange;
        margin-top: 10px;
        background-color: #fff;
    }
    .list_item_img {
        width: 100%;
    }
    .list_item_img img {
        width: 100%;
        height: 160px;
    }
    .list_item_title {
        width: 100%;
        height: 40px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .list_item_price {
        width: 100%;
        color: red;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
    }
    .add_details {
        width: 30px;
        height: 30px;
        border: 1px solid red;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    .content {
        width: 100%;
        height: 300px;
    }
    .content_header {
        width: 100%;
        height: 120px;
        border: 1px solid gray;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
    }
    .content_header_img {
        width: 100px;
        height: 100px;
        border: 1px solid gray;
        border-radius: 10px;
        margin-left: 10px;
        overflow: hidden;
    }
    .content_header_img img {
        width: 100%;
    }
    .content_header_message {
        width: 100%;
    }
    .header_messa_title {
        width: 100%;
        height: 40px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .header_messa_price {
        width: 60%;
        color: red;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
    }
    .details_bottom {
        width: 100%;
        height: 50px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background-color: red;
        color: #fff;
    }
</style>